<template>
    <div style="height:100%;width:100%;" class="detail">
        <bar class="bar" @on-back="$router.back()" title="公告通知"></bar>
        <div class="notice-content">
            <div class="title">{{title}}</div>
            <div style="padding: 0 10px" v-html="compiledMarkdown">{{html}}</div>
        </div>
    </div>
</template>

<script>
    import marked from 'marked'
    import {
        lang
    } from 'muka'
    import {
        Bar
    } from 'muka-ui'

    export default {
        name: 'noticeInfo',
        components: {
            Bar
        },
        data: function () {
            return {
                html: '',
                title: ''
            }
        },
        created: function () {
            this.$ajax(
                'announcement/announceDetail',
                {
                    id: this.$route.query.id
                },
                (content) => {
                    this.html = content.content
                    this.title = content.title
                })
        },
        computed: {
            compiledMarkdown: function () {
                return marked(this.html, {
                    sanitize: true
                })
            }
        }
    }

</script>

<style lang="less">
    .notice-content {
        background: white;
        padding: 10px;
        .title {
            text-align: center;
            font-size: 18px;
            line-height: 40px;
            font-weight: 800
        }
    }

</style>
